 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">新建用户</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="user-item">
          <Form-item label="用户名" prop="account">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.account" size="large" placeholder="请输入用户名"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="用户昵称" prop="real_name">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.real_name" size="large" placeholder="请输入用户昵称"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="登录密码" prop="pwd">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.pwd" type="password" size="large" ></i-input>
              </i-col>
              <i-col span="14">
                <span class="user-right">请填写6到12位密码</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="超级密码" prop="sp_pwd">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.sp_pwd" type="password" size="large" ></i-input>
              </i-col>
              <i-col span="14">
                <span class="user-right">请填写6到12位超级密码</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="角色选择" prop="roles">
            <Row>
              <i-col span="10">
               <Select multiple  v-model="formValidate.roles" >
                      <Option v-for="item in rolesData" :value="item.id" :key="item.id">{{ item.role_name }}</Option>
                  </Select>
              </i-col>

            </Row>
          </Form-item>

          <Form-item label="超级管理" prop="level">
            <Row>
              <i-col span="10">
                <Radio-group v-model="formValidate.level" size="large">
                  <Radio label="0">
                      <span>是</span>
                  </Radio>
                  <Radio label="1">
                      <span>否</span>
                  </Radio>
                </Radio-group>
              </i-col>
              <i-col span="14">
                <span class="user-right">超管拥有所有菜单权限</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="状态" prop="status">
            <Radio-group v-model="formValidate.status" size="large">
              <Radio label="1">
                  <span>启用</span>
              </Radio>
              <Radio label="0">
                  <span>停止</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <div class="ban-btn">
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
            <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
          </div>
        </i-form>
      </div>
   </Card>

 </template>
<script>
import { saveAdmin, getRoleList } from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'user-add',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
		 formValidate: {
		   account: '',
		   real_name: '',
		   pwd: '',
		   sp_pwd: '',
		   level: '1',
		   status: '1',
        roles: null
		 },
		 ruleValidate: {
		   account: [
		     {
		       required: true,
		       message: '请输入用户名',
		       trigger: 'blur'
		     }
		   ],

		   pwd: [
		     {
		       required: true,
		       message: '请输入登录密码',
		       trigger: 'blur'
		     }
		   ],
        sp_pwd: [
          {
            required: true,
            message: '请输入超级密码',
            trigger: 'blur'
          }
        ],
        roles: [
          {
            required: true,
          	            type: 'array',
          	            message: '至少选择一个角色',
          	            trigger: 'change'
          }
        ]
		  },
      rolesData: []
    }
  },
  created () {
    this.getRoles()
  },
  methods: {
    ...mapMutations(['closeTag']),
    close () {
      this.closeTag({
        name: 'user-add'
      })
    },
    getRoles () {
      let data = {
        keyword: '',
        pageCurrent: 1,
        pageSize: 50
      }
      getRoleList(data)
        .then(res => {
          this.rolesData = res.data.data
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
	 // 表单验证
	 handleSubmit () {
	   this.$refs['formValidate'].validate((valid) => {
	     if (valid) {
          saveAdmin(this.formValidate)
            .then(res => {
              this.$Message.success(res.msg)
              setTimeout(() => this.close(), 1000)
            }).catch(err => {
              this.$Message.error(err.msg)
            })
	     } else {
	       this.$Message.error('表单验证失败!')
	     }
	   })
	 }
  }
}
</script>
 <style lang="less">
	 .user-item .ivu-form-item-label{
	   font-size: 14px;
	 }
	 .user-right{
	   margin-left: 15px;
	   color: #999;
	   font-size: 14px;
	   height: 36px;
	   line-height: 20px;
	   overflow: hidden;
	   white-space: nowrap;
	   text-overflow: ellipsis;
	   -webkit-box-sizing: border-box;
	   box-sizing: border-box;
	 }
 </style>
